<template>
    <baseTeacherRoleDelAdd ref="baseTeacherRoleDelAdd" />
    <el-dialog v-model="dialogFormVisible" :title="`${title} (${list.length}人)`" @close="closeDialog"
        style="width:800px;">
        <div class="app-body1">
            <div class="btnBox">
                <el-button class="add_btn" @click="batchHandle">批量操作</el-button>
            </div>
            <!-- <el-form :inline="true" class="demo-form-inline" v-model="form">
                <el-form-item label="角色名称">
                    <el-input placeholder="请输入角色名称" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="serach_btn" plain @click="onSubmit" @keyup.enter="searchEnter">搜索</el-button>
                </el-form-item>
            </el-form> -->
            <el-table size="default" :data="list" style="width: 100%">
                <el-table-column prop="id" label="id" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="departmentNames" label="部门" />
                <el-table-column label="操作" width="80px">
                    <template style="display: block" #default="scope">
                        <el-button class="del_btn" size="small" type="danger" @click="deleteRoleHandle(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
                <template v-slot:empty>
                    <el-empty description="暂无数据"></el-empty>
                </template>
            </el-table>
            <el-config-provider :locale="locale">
                <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                    @current-change="changeCurrentPage">
                </el-pagination>
            </el-config-provider>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <!-- <el-button @click="cancel()">取消</el-button> -->
                <el-button type="primary" @click="cancel()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElMessageBox } from "element-plus";
import { vxRule } from "@/utils/validator";
import baseTeacherRoleDelAdd from "./baseTeacherRoleDelAdd.vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default {
    name: "AddBasePermission",
    components: { ElForm, ElMessage, baseTeacherRoleDelAdd, ElMessageBox },
    setup() {
        return {
            locale: zhCn,
        };
    },
    data() {
        return {
            list: [],
            rId: 0,
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            addBasePermissionForm: {
                // url: "",
                // name: "",
                // parentId: "",
                // detail: "",
                // sortNum: "",
            },
            // 校验规则
            addBasePermissionrules: {
                // url: vxRule(true, null, "blur"),
                // name: vxRule(true, null, "blur"),
                // detail: vxRule(true, null, "blur"),
            },
            rType: '',
            myRid: '',
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        deleteRoleHandle(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/baseTeacher/deleteRoleByUId", "id=" + id, "post").then(
                        (data) => {
                            console.log(data);
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getPersonalList();
                            } else {
                                ElMessage.error("删除失败");
                            }
                        }
                    );
                })
                .catch(() => { });

        },
        batchHandle() {
            this.$refs.baseTeacherRoleDelAdd.dialogFormVisible = true
            this.$refs.baseTeacherRoleDelAdd.rId = this.myRid
            this.$refs.baseTeacherRoleDelAdd.listByDepartmentId()
            // console.log("lie", this.list);
            // this.$refs.baseTeacherRoleDelAdd.rightList = this.list
            this.$refs.baseTeacherRoleDelAdd.editHandle(this.list)

        },
        getPersonalList(id) {
            httpService("/javaApi/baseTeacher/byRoleAndCampus", { rId: this.myRid }, "get").then(
                (data) => {
                    this.list = data;
                    // this.title = `${this.title} （${this.list.length}人）`
                }
            );
        },
        clear() {
            this.dialogFormVisible = false;
            this.myRid = ''
            this.list = []
            this.title = ""
        },
    },
};
</script>
<style scoped>
.btnBox {
    margin-top: 10px;
    margin-bottom: 10px;
}

.add_btn {
    background-color: #00c78c;
    color: #fff;
    border-radius: 8px;
    border: none;
}
</style>